<template>
  <div class="matching">
    <TopInfo />
	<TopTabs2 />
    <div class="content">
      <div class="match-count">
        为你查找到<span>{{ count }}</span
        >条记录
      </div>
      <ul class="matching-list">
        <li
          @click="ToServiceDetail(item)"
          v-for="item in newsData"
          :key="item.Id"
        >
          <div class="line1">{{ item.NewTitle }}</div>
          <div class="line4">
            <span class="fl">{{ item.TypeName }}</span>
          </div>
          <div class="line4">
            <span class="fl">时间：{{ item.CreateDate }}</span>
          </div>
        </li>
      </ul>
      <infinite-loading @infinite="infiniteHandler" style="margin-top: 30px">
        <span slot="no-more" style="color: #999; font-size: 18px"
          >到底了！</span
        >
      </infinite-loading>
    </div>
    <BottomInfo />
    <!-- <el-backtop target=".matching">
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
    </el-backtop> -->
    <!-- <el-backtop target=".matching" :visibility-height=400></el-backtop> -->
  </div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs2 from "../components/TopTabs2";
import InfiniteLoading from "vue-infinite-loading";
export default {
  name: "News",
  data() {
    return {
      keywords: "",
      activeTabs: 0,
      limit: 10,
      page: 0,
      day: 0,
      typeid: 0,
      loading: false,
      // finished: false,
      newsData: [],
      isLoading: true,
      count: 0,
    };
  },
  components: {
    BottomInfo,
    TopInfo,
    TopTabs2,
    InfiniteLoading,
  },
  created() {
    // this.infiniteHandler();
  },
  mounted(){
	  this.typeid = this.$cookies.get("newid");
  },
  methods: {
    ToServiceDetail(newdata) {
      this.$router.push({ name: "ServiceDetail", params: { newdata } });
    //   this.$cookies.set("TopActive", 7);
    },
    infiniteHandler($state) {
      this.$axios({
        url: "/New/GetNewsList",
        method: "post",
        data: {
          limit: this.limit,
          page: Math.ceil(this.newsData.length / 10 + 1),
        //   day: this.day,
          typeid: this.typeid,
        //   title: this.keywords,
        //   userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      }).then((response) => {
        if (response.data.data.length) {
          // response.data为你请求接口返回的数组列表
          this.count = response.data.count;
          this.newsData = this.newsData.concat(response.data.data);
          $state?.loaded();
          if (this.newsData.length / 10 === 10) {
            // 这里是加载了10页数据，设置不在加载
            $state.complete();
            this.count = 0;
          }
        } else {
          $state.complete();
          this.count = 0;
        }
      });
    },
    // SearchList() {
    //   this.page = 1;
    //   this.newsData = [];
    //   this.infiniteHandler();
    // },
    // ChangeZc(n) {
    //   this.typeid = n;
    //   this.keywords = "";
    //   this.newsData = [];
    //   this.infiniteHandler();
    // },
    // ChangeDays(day) {
    //   this.day = day;
    //   this.keywords = "";
    //   this.newsData = [];
    //   this.infiniteHandler();
    // },
  },
};
</script>

<style scoped>
.matching {
  min-height: 800px;
  /* overflow-y: auto; */
}
.content {
  background-color: #f4f6fc;
  padding: 25px 0;
}
.filter-part {
  background-color: #fff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  margin: 0 auto;
  width: 1200px;
  padding: 25px;
  box-sizing: border-box;
  padding-bottom: 0;
}
.search-part {
  padding: 30px 280px;
  border-bottom: 1px solid #eeeeee;
}
.area,
.year {
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
  overflow: hidden;
  color: #333;
  font-size: 14px;
}
.year {
  border-bottom: none;
}
.area .title,
.year .title {
  width: 120px;
  text-align: center;
  padding: 5px 8px;
  box-sizing: border-box;
}
.area-list,
.year-list {
  width: 1030px;
}
.area-list li,
.year-list li {
  float: left;
  cursor: pointer;
  margin-right: 20px;
  padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
  margin-right: 0;
}
.area-list li.active,
.year-list li.active {
  color: #fff;
  background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
  color: #fff;
  background-color: #095aff;
}
.match-count {
  width: 1200px;
  margin: 25px auto;
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.match-count span {
  color: #095aff;
  font-weight: bold;
  margin: 0 5px;
}
.matching-list {
  width: 1200px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  margin: 0 auto;
  padding: 25px 35px;
  box-sizing: border-box;
}
.matching-list li {
  padding: 15px 20px;
  border-radius: 10px;
  color: #333333;
  font-size: 16px;
  cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
  background: #f7f7f7;
}
.matching-list li .line1 {
  font-weight: bold;
  font-size: 20px;
  /* margin-bottom: 20px; */
}
.matching-list li .line2 {
  margin-bottom: 10px;
}
.matching-list li .line3 {
  margin-bottom: 10px;
  overflow: hidden;
}
.matching-list li .line3 > span.fl {
  color: #d74248;
  border: 1px solid #d74248;
  padding: 2px 5px;
}
.matching-list li .line4 {
  overflow: hidden;
  margin-top: 10px;
}
.matching-list li .line4 .star {
  color: #ffd34c;
  font-size: 30px;
  float: right;
  cursor: pointer;
}
.matching-list li .line4 .star2 {
  color: #ffd34c;
  font-size: 30px;
  float: right;
  cursor: pointer;
}
</style>
